<template>
	<gracePage headerBG="#FF0000" footerBg="#FFFFFF" :customHeader="false">
		<view slot="gBody" style="padding-bottom:120rpx;">
			<!-- 商品标题 分享按钮 -->
			<view class="grace-common-line"></view>
			<!-- 底部信息切换导航 -->
			<!-- 详情 请根据项目情况自行改进 可以使用 富文本-->
			<view class="grace-body">
				<view class="grace-news-list grace-border-b">
					<view class="text-item">
						<rich-text type="text" :nodes="formatRichtext(content)"></rich-text>
					</view>
				</view>
				<button class="grace-button" type='warn' style="width:98%;" @tap="signup">立即报名</button>
			</view>
		</view>
	</gracePage>
</template>
<script>
	import gracePage from "../../graceUI/components/gracePage.vue";
	var richText = require("../../graceUI/jsTools/richText.js");
	export default {
		data() {
			return {
				id:'',
				content:'',
			}
		},
		onLoad: function(options) {
			this.id = options.id;
			this.getDetail(this.id);
		},
		methods: {
			//富文本格式化
			formatRichtext: function(content) {
				let text = '';
				if (content != null) {
					text = richText.format(content);
				}
				return text;
			},
			//打开属性视图
			async getDetail(id) {
				let data = await this.$apis.getNewsItemInfo({item_id:id});
				this.content = data;
			},
			//打开属性视图
			async signup() {
				let data = await this.$apis.signup({item_id:this.id});
				uni.showLoading({
					title: '报名成功！'
				});
			},
		},
		components: {
			gracePage
		}
	}
</script>
<style>
	.grace-common-line {
		height: 16rpx;
	}

	.grace-product-padding {
		padding: 20rpx 25rpx;
	}

	.grace-product-title {
		line-height: 44rpx;
		font-size: 28rpx;
	}

	.grace-product-share {
		width: 80rpx;
		height: 80rpx;
		text-align: center;
		font-size: 40rpx;
		color: #FF7900;
		line-height: 80rpx;
		flex-shrink: 0;
		margin-left: 12px;
	}

	.grace-product-share:after {
		width: 0;
		height: 0;
	}

	.grace-product-price {
		color: #FF7900;
		line-height: 60rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	.grace-product-info-img {
		width: 100%;
	}

	.grace-product-attr-info {
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #F1F1F3;
		padding-bottom: 26rpx;
	}

	.grace-product-attr-info-image {
		width: 120rpx;
		height: auto;
		margin-right: 10px;
		flex-shrink: 0;
	}

	.grace-product-attr-info-body {
		width: 700rpx;
	}

	.grace-product-attr-info-title {
		width: 100%;
		font-size: 28rpx;
		color: #333333;
		display: block;
	}

	.grace-product-attr-info-stone {
		width: 100%;
		font-size: 20rpx;
		margin-top: 8rpx;
		color: #666666;
		display: block;
	}

	.icon-close {
		font-size: 30rpx;
		line-height: 80rpx;
		color: #888888;
	}

	/* 调整宫格大小 */
	.grace-grids-items {
		padding: 6rpx 0;
		width: 120rpx;
	}

	.grace-grids-icon {
		height: 50rpx;
		line-height: 50rpx;
		font-size: 40rpx;
		color: #6B7375;
	}

	.grace-grids-text {
		line-height: 28rpx;
		font-size: 20rpx;
		margin-top: 2px;
		color: #6B7375;
	}

	.grace-footer-active {
		color: #FF0036;
	}

	.grace-news-img {
		width: 220rpx;
		height: 150rpx;
	}

	.big-img {
		width: 700rpx;
		height: 388rpx;
		overflow: hidden;
		margin: 15rpx 0;
	}

	.big-image {
		width: 700rpx;
		height: 388rpx;
		border-radius: 6rpx;
	}

	.grace-news-imgs-img {
		width: 225rpx;
		height: 380rpx;
	}
</style>
